<template>
	<view class="card-box">
		<view class="select_pay_box ">
			<view class="pay-box bg-white">
				<view class="pay-way">
					<view class="fs32">支付方式</view>
					<u-grid :col="3" :border="false" class="u-p-t-30" hover-class="none">
						<u-grid-item v-for="(item,index) in paySetting.payList" :key="index" @click="pay_code=item.pay_code" :custom-style="{padding:'0 10rpx'}">
							<view class="item" :class="pay_code == item.pay_code ? 'checked': ''">
								<u-icon :name="payImgList[item.pay_code]" :size="48"></u-icon>
								<view class="grid-text u-p-t-20 u-font-24">{{item.pay_name}}</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view v-if="pay_code=='offline'" class="account-box u-m-t-40">
					<view class="fs32">上级收款账户</view>
					<view class="section-cell u-m-t-30">
						<u-section :title="sectionTitle" :sub-title="sectionSubTitle" :subColor="sectionSubColor" @click="showAccount" :showLine="false"></u-section>
					</view>
					<view>
						<u-select v-model="showAccountSelect" :list="offlinePayList" @confirm="selectOffline" confirm-color="#C39F4F"></u-select>
					</view>
					<view>
						<u-cell-group>
							<block v-if="paySetting.offline.weixin_usd == 1 && selectOfflinePay == 1">
								<u-cell-item title="帐户姓名" :value="paySetting.offline.weixin_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="微信号" :value="paySetting.offline.weixin_account" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="收款二维码" :use-label-slot="true" :border-bottom="false" :arrow="false" hover-class="none">
									<view slot="label">
										<u-image width="600" mode="widthFix" :src="baseUrl+paySetting.offline.weixin_qrcode"></u-image>
										<!-- <u-image width="600" mode="widthFix" src="/pagesB/static/channel/images/proxy_bg.png"></u-image> -->
									</view>
								</u-cell-item>
							</block>
							<block v-if="paySetting.offline.alipay_usd == 1 && selectOfflinePay == 2">
								<u-cell-item title="帐户姓名" :value="paySetting.offline.alipay_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="支付宝帐户" :value="paySetting.offline.alipay_account" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="收款二维码" :use-label-slot="true" :border-bottom="false" :arrow="false" hover-class="none">
									<view slot="label">
										<u-image width="600" mode="widthFix" :src="baseUrl+paySetting.offline.alipay_qrcode"></u-image>
										<!-- <u-image width="600" mode="widthFix" src="/pagesB/static/channel/images/proxy_bg.png"></u-image> -->
									</view>
								</u-cell-item>
							</block>
							<block v-if="paySetting.offline.bank_usd == 1 && selectOfflinePay == 3">
								<u-cell-item title="开户银行" :value="paySetting.offline.bank_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="开户支行" :value="paySetting.offline.bank_subbranch" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="持卡人姓名" :value="paySetting.offline.bank_user_name" :arrow="false" hover-class="none"></u-cell-item>
								<u-cell-item title="银行卡号" :value="paySetting.offline.bank_card_number" :arrow="false" hover-class="none"></u-cell-item>
							</block>
							
						</u-cell-group>
					</view>
				</view>
			</view>
			<view>
				<block v-if="pay_code=='offline'" >
					<u-cell-item title="上传付款凭证（最多三张）" 
						class="u-p-l-0 u-p-r-0" 
						:use-label-slot="true" 
						:title-style="{fontSize:'32rpx'}"
						:border-bottom="false" 
						:arrow="false" 
						hover-class="none">
						<view slot="label">
							<u-upload ref="upload" @on-change="uploaded" @on-remove="removeImg" :action="upAction" max-count="3"></u-upload>
						</view>
					</u-cell-item>
				</block>
			</view>
			
			<!-- 
			<view class="title b-tottom p20">
				<text class="tip">请选择支付方式</text>
			</view>

			<view v-for="(item,index) in paySetting.payList" :key="index" @click="pay_code=item.pay_code">
				<view class="space-between p20 pt30 pb30 b-tottom">
					<view class="smll">
						<view class="img mr20">
							<u-image :src="payImgList[item.pay_code]" mode="widthFix"></u-image>
						</view>
						<view class="fs28">{{item.pay_name}}</view>
						<view class="money  ff">
							<view v-if="item.money >= 0">
							（剩余<text class="fs24 base-color">￥</text>
								<text class="fs40 base-color">{{item.money}}</text> ）
							</view>
						</view>
					</view>

					<view v-if="pay_code == item.pay_code">
						<view class="item_icon bg-base" >
							<u-icon class="u-icon" name="checkbox-mark" color="#FFFFFF" size="26"></u-icon>
						</view>
					</view>
					<view v-else class="check-defaul"></view>
				</view>
			</view> -->
		</view>
		<!-- <view v-if="pay_code=='offline'" class="mt20">
			<view class="fs30 color-baseb" v-if="paySetting.offline.is_sys == 0">
				线下转帐给上级代理，以下为上级代理的收款信息
			</view>
			<view class="offline_box " v-if="paySetting.offline.weixin_usd == 1">
				<view class="title">
					<u-image class="icon" src="/static/public/images/pay/weixin.png" shape="circle"></u-image>微信转帐
				</view>
				<view class="info">
					<view>帐户姓名：{{paySetting.offline.weixin_name}}</view>
					<view>微信号：{{paySetting.offline.weixin_account}}</view>
					<u-image mode="widthFix" :src="baseUrl+paySetting.offline.weixin_qrcode"></u-image>
				</view>
			</view>
			<view class="mt20 offline_box" v-if="paySetting.offline.alipay_usd == 1">
				<view class="title alipay">
					<u-image class="icon" src="/static/public/images/pay/alipay.png" shape="circle"></u-image>支付宝转帐
				</view>
				<view class="info">
					<view>帐户姓名：{{paySetting.offline.alipay_name}}</view>
					<view>支付宝帐户：{{paySetting.offline.alipay_account}}</view>
					<u-image mode="widthFix" :src="baseUrl+paySetting.offline.alipay_qrcode"></u-image>
				</view>
			</view>
			<view v-if="paySetting.offline.bank_usd == 1" class="mt20  offline_box">
				<view class="title bank">
					<u-image class="icon" src="/static/public/images/pay/bank.png" shape="circle"></u-image>银行转帐
				</view>
				<view class="fs32  p20">
					<view>开户银行：{{paySetting.offline.bank_name}}</view>
					<view>开户支行：{{paySetting.offline.bank_subbranch}}</view>
					<view>持卡人姓名：{{paySetting.offline.bank_user_name}}</view>
					<view>银行卡号：{{paySetting.offline.bank_card_number}}</view>
				</view>
			</view>
			<view v-if="paySetting.offline.is_usd == 1" class=" post—box p20">
				<view class="title">请提交付款凭证：</view>
				<view class="mt20">
					<u-upload ref="upload" @on-change="uploaded" @on-remove="removeImg" :action="upAction" max-count="6"></u-upload>
				</view>
				<u-button class="defaultbtn mt20" shape="circle" :loading="isLoading" @click="postOffLine">立即提交</u-button>
			</view>
			<view v-else class="p40 mt20 text-center base-color">上级未设置线下收款信息</view>
		</view> -->
		<u-button v-if="pay_code!='' && pay_code!='offline'" 
			class="mt20 defaultbtn" 
			shape="circle"  
			:loading="isLoading"
			@click="pay">立即支付</u-button>
			
		<u-button v-if="pay_code=='offline'" class="defaultbtn mt20" shape="circle" :loading="isLoading" @click="postOffLine">立即提交</u-button>
		
	</view>
</template>


<script>
	export default {
		name: "payBox",
		props: {
			paySetting: {
				type: Object,
				default: function() {
					return {
						offline: {
							weixin_usd: 0,
							alipay_usd: 0,
							bank_usd: 0
						}
					};
				}
			},
			payType: {
				type: String,
				default: ''
			},
			from: {
				type: String,
				default: ''
			},
			order_id: {
				type: Number,
				default: 0
			},
			model: {
				type: Object,
				Object,
				default: function() {
					return {};
				}
			},
			is_user_account:{
				type:[String,Number],
				default:0
			},
			isDefaultPayCode: {
				type: Boolean ,
				default: true
			}
		},
		//可以监听子组件属性值的变化
		watch:{
			is_user_account:{
				handler:function(val){
					this.isUserAccount = val
					//  只要给banlance这个属性传值,这个组件内的userBanlance就会跟着变.这里面取值,就取userBanlance就好了,明白了不 我先看看
					console.log('余额发生变化,当前余额为:' + this.is_user_account)
				},
				immediate:false
			}
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				isLoading: false,
				searchText: '',
				showSelectBox: true,
				pay_code: this.isDefaultPayCode ? 'offline' : '',
				upAction: this.config.upImageUrl,
				fileList: [],
				payImgList: {
					balance: '/static/public/images/pay/balance.png',
					weixin: '/static/public/images/pay/weixin.png',
					appWeixinPay: '/static/public/images/pay/weixin.png',
					miniAppPay: '/static/public/images/pay/weixin.png',
					alipayMobile: '/static/public/images/pay/alipay.png',
					alipayApp: '/static/public/images/pay/alipay.png',
					offline: '/static/public/images/pay/bank.png',
					goodsMoney: '/static/public/images/pay/goodsmoney.png',
					uplevelGoodsMoney: '/static/public/images/pay/goodsmoney.png',
				},
				orderInfo: {},
				showAccountSelect: false,
				offlinePayList:[],
				sectionTitle: '上级未设置收款账户',
				sectionSubTitle: '电话联系上级',
				sectionSubColor: '#C39F4F',
				selectOfflinePay: 0,
				isUserAccount:0
			}
		},
		mounted() {
			if(this.isDefaultPayCode){
				this.setOfflinePay();
			}
		},
		methods: {
			showAccount(){
				if(this.paySetting.offline.is_usd == 1){
					this.showAccountSelect = true;
				}else{
					let that = this;
					uni.makePhoneCall({
					    phoneNumber: that.proxyInfo.supply_mobile
					});
				}
			},
			selectOffline(val){
				this.selectOfflinePay = val[0].value != null ? val[0].value : this.selectOfflinePay;
				this.sectionTitle = val[0].label != null ? val[0].label : this.sectionTitle;
			},
			setOfflinePay(){
				if(this.paySetting.offline.weixin_usd == 1){
					this.offlinePayList.push({
						value: '1',
						label: '微信转帐'
					});
				}
				if(this.paySetting.offline.alipay_usd == 1){
					this.offlinePayList.push({
						value: '2',
						label: '支付宝转帐'
					});
				}
				if(this.paySetting.offline.bank_usd == 1){
					this.offlinePayList.push({
						value: '3',
						label: '银行转帐'
					});
				}
				//if(this.paySetting.offline.is_usd == 1) this.sectionTitle = '请选择上级代理的收款账户';
				if(this.paySetting.offline.is_usd == 1){
					this.sectionTitle = '请选择上级代理的收款账户';
					this.sectionSubTitle = '查看全部账户';
					this.sectionSubColor = '#999999';
				}
				//this.showAccountSelect = true;
			},
			postOffLine() {
				if (this.isLoading == true) {
					return false;
				}
				/*if (this.fileList.length < 1) {
					this.$u.toast('请上传付款凭证.');
					return false;
				}*/
				this.isLoading = true;
				let order_id = this.order_id;
				let payType = this.payType;
				let from = this.from;
				let url = '';
				let data = {};
				if (payType == 'order' || payType == 'fgorder') {
					if (from == 'shop') {
						url = 'shop/api.order/postOffLinePay';
					} else if (from == 'channel') {
						url = 'channel/api.order/postOffLinePay';
					} else {
						return this.$u.toast('请求错误.');
					}
					data.order_id = order_id;
					data.fileList = this.fileList.join(',');
				} else if (payType == 'recharge') { //充值处理
					data = this.model;
					if (data.money == '' || data.money <= 0) {
						this.isLoading = false;
						return this.$u.toast('请输入充值金额.');
					}
					data.fileList = this.fileList.join(',');
					data.payCode = 'offline';
					if (from == 'member') {
						url = 'member/api.wallet/postRecharge';
					} else if (from == 'channel') {
						url = 'channel/api.wallet/postRecharge';
					} else {
						return this.$u.toast('请求错误.');
					}
				}
				this.$u.post(url, data).then(res => {
					this.isLoading = false;
					uni.redirectTo({
						url: `/pages/public/pay/paySuccess?from=${from}&payType=${payType}&order_id=${order_id}&pay_code=offline`
					});
				}).catch(res => {
					this.isLoading = false;
				})

			},
			async pay() {
				// return false
				if (this.isLoading == true) {
					return false;
				}
				if(this.pay_code=="balance"){
					//判断余额是否足够
					if(this.isUserAccount==0){
						return this.$u.toast('余额不足,请切换支付方式');
					}
				}
				this.isLoading = true;
				let route = '/pages/public/pay/paySuccess';
				let order_id = this.order_id;
				let from = this.from;
				let url = '';
				//充值处理，先创建充值订单，返回订单ID
				if (this.payType == 'recharge') {
					let data = this.model;
					if (data.money == '' || data.money <= 0) {
						this.isLoading = false;
						return this.$u.toast('请输入充值金额.');
					}
					data.payCode = this.pay_code;
					if (from == 'member') {
						url = 'member/api.wallet/postRecharge';
					} else if (from == 'channel') {
						data.proxy_id = this.proxy_id;
						url = 'channel/api.wallet/postRecharge';
					} else {
						return this.$u.toast('请求错误.');
					}
					let res = await this.$u.post(url, data).catch(res => {})
					this.isLoading = false;
					order_id = res.data.order_id;
					if (order_id < 1) return false;
				}
				let source = this.app.getPlatform();
				if (source == 'H5-WX'){
					window.location.href = this.baseUrl+'pages/public/pay/payIng?from=' + this.from + '&pay_code=' + this.pay_code + '&payType=' + this.payType +
						'&order_id=' + order_id + '&route=' + route;
				}else{
					this.app.goPage('/pages/public/pay/payIng?from=' + this.from + '&pay_code=' + this.pay_code + '&payType=' + this.payType +
						'&order_id=' + order_id + '&route=' + route,-1)
				}
					
				this.isLoading = false;
			},
			uploaded(res, index, lists) {
				var res = JSON.parse(res.data);
				this.fileList.push(res.file);
			},
			removeImg(index, lists) {
				let file = this.fileList[index];
				this.fileList.splice(index, 1);
				this.$u.post(this.config.removeImageUrl, {
					file: file
				}).then(res => {})
			}
		}
	}
</script>

<style lang="scss">
	.card-box {
		height: calc(100vh - 200rpx);
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.select_pay_box {
		.title {
			align-items: center;
			font-size: 36rpx;
			font-weight: 600;
			border-bottom: 1rpx solid $border-color-light;

			.tip {
				font-weight: normal;
				display: block;
				font-size: 26rpx;
				color: $font-color-light;
			}
		}


		.box {
			position: relative;
			height: 260rpx;
			width: calc(100% - 20rpx);
			overflow: hidden;
			text-align: center;
		}

		.img {
			width: 48rpx;
			height: 48rpx;

		}

		.item_icon {
			display: inline-block;
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			position: relative;
			margin: 0;
		}

		/* .u-icon {
			position: absolute;
			top: 6rpx;
			right: 0px;
			left: 0;
			z-index: 9;
			text-align: center;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
		} */
	}

	.check-defaul {
		width: 40rpx;
		height: 40rpx;
		border: solid 1rpx #dddddd;
		border-radius: 50%;
	}

	.offline_box {
		line-height: 60rpx;

		.title {
			position: relative;
			padding-left: 100rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #ccc;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: $uni-color-success;

			.icon {
				position: absolute;
				left: 20rpx;
				width: 60rpx !important;
				height: 60rpx !important;
			}

		}

		.alipay {
			background-color: $uni-color-primary;
		}

		.bank {
			background-color: $uni-color-error;
		}

		.info {
			padding: 20rpx;
			line-height: 60rpx;
			font-size: 30rpx;
		}
	}
	
	.pay-box{
		/* min-height: calc(100vh - 288rpx); */
		padding: 40rpx 20rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		
		.item {
			padding: 30rpx 10rpx;
			width: 100%;
			height: 100%;
			text-align: center;
			border: 2rpx solid #ccc;
			border-radius: 8rpx;
			&.checked{
				background: #F9F5ED;
				border: 2rpx solid #744800;
			}
		}
		
	}
	
	.section-cell{
		padding: 20rpx;
		border-radius: 8rpx;
		background: #ececec;
	}
</style>
